<template>
	<view class="login">
		<view class="login-img">
			<view class="owl-login" :class="hideEyes?'password':''">
				<view class="hand"></view>
				<view class="hand hand-r"></view>
				<view class="arms">
					<view class="arm"></view>
					<view class="arm arm-r"></view>
				</view>
			</view>
		</view>
		<view class="login-form">
			<u-form :model="params" ref="uForm" :errorType="form.errorType">
				<u-form-item class="form-item-fir" prop="account" :label-position="form.labelPosition">
					<u-input v-model="params.account" placeholder="用户名" type="text" />
				</u-form-item>
				<u-form-item class="form-item-sec" prop="password" :label-position="form.labelPosition">
					<u-input v-model="params.password" placeholder="密码" @focus="passwordF_B" @blur="passwordF_B" type="password" />
				</u-form-item>
			</u-form>
		</view>
		<view class="btn" @tap="handleLogin">登录</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hideEyes: false,
				params: {},
				form: {
					errorType: ['message'],
					labelPosition: 'top'
				},
				rules: {
					account: [{
						required: true,
						message: '请输入用户名',
						trigger: ['blur']
					}, {
						min: 5,
						message: '长度最少为5个字符',
						trigger: ['blur']
					}],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: ['blur']
						}, {
							min: 6,
							max: 20,
							message: '密码长度在6到20个字符',
							trigger: ['blur']
						},
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							transform(value) {
								return String(value);
							},
							message: '密码为字母或数字',
							trigger: ['blur']
						}
					]
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			passwordF_B() {
				this.hideEyes = !this.hideEyes;
			},
			handleLogin() {
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						if (this.params.account === 'admin' && this.params.password === '123456') {
							const token = 'seqteskjgdflgjoerijgldfkjgdfoig-fdhgerghdlkfgjdlskjg;dsijgdfjg'
							// #ifdef APP-PLUS
							await this.fileWriter(token)
							// #endif
							uni.setStorageSync('token',token)
							uni.switchTab({
								url: '/pages/tabbar/home/index'
							})
							console.log(123)
						} else {
							this.$refs.uToast.show({
								title: '账号或密码错误',
								type: 'error'
							})
						}
					}
				})
			},
			// token存放在本地localStorage里面有可能会丢失，替代方案：将token存在token.txt文件中，在每次进入app时提取token
			fileWriter(data) {
				const self = this;
				plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fobject) {
					fobject.root.getFile('token.txt', {
						create: true
					}, function(fileEntry) {
						fileEntry.file(function(file) {
							fileEntry.createWriter(function(writer) {
								writer.seek(0)
								writer.write(data);
							}, function(e) {
								console.log(e)
							});
						});
					});
				});
			}
		}
	}
</script>

<style lang="scss">
	.login {
		height: 100vh;
		width: 100%;
		background: url(../../static/login-bgi.jpg) no-repeat;
		background-size: 100% 100%;
		overflow: hidden;
	}

	::v-deep .login-form {
		margin: -9px 10px 0 10px;
		height: 200px;
		background: #007AFF;
		border-radius: 10px;
		background-color: #eee;
		box-shadow: 0 2px 10px #9B9B9B;
		padding: 20px;

		.u-form {
			position: relative;

			.form-item-fir {
				width: 100%;
				position: absolute;
				left: 0;
				top: 15rpx;
			}

			.form-item-sec {
				width: 100%;
				position: absolute;
				left: 0;
				top: 140rpx;
			}

			.u-border-bottom::after {
				border: none !important;
			}

			.u-form-item {
				margin-top: 20rpx;

				.u-input {
					background-color: #fff;
					border-radius: 10rpx;

					.u-icon__icon {
						padding-right: 20rpx;
					}

					.uni-input-input,
					.uni-input-placeholder {
						padding: 10rpx 20rpx;
					}
				}
			}
		}
	}

	.btn {
		height: 80rpx;
		font-size: 36rpx;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		margin: 100rpx 20rpx;
		border-radius: 20rpx;
		background-image: linear-gradient(to right, #3363B7, #84c0d2);

		&:active {
			opacity: .7;
		}
	}

	.login-img {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 108px;
		margin-top: 40%;
	}

	.owl-login {
		width: 211px;
		height: 108px;
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100%;
		position: absolute;
	}

	.owl-login .hand {
		width: 34px;
		height: 34px;
		-webkit-border-radius: 40px;
		border-radius: 40px;
		background-color: #472d20;
		transform: scaleY(0.6);
		transition: 0.3s ease-out;
		position: absolute;
		left: 14px;
		bottom: -8px;
	}

	.owl-login .hand.hand-r {
		left: 170px;
	}

	.owl-login .arms {
		top: 58px;
		position: absolute;
		width: 100%;
		height: 41px;
		overflow: hidden;
	}

	.owl-login .arms .arm {
		width: 40px;
		height: 65px;
		position: absolute;
		left: 20px;
		top: 40px;
		background-image: url("");
		background-size: 100%;
		transition: 0.3s ease-out;
		transform: rotate(-20deg);
	}

	.owl-login .arms .arm.arm-r {
		transform: rotate(20deg) scaleX(-1);
		left: 158px;
	}

	.owl-login.password .hand {
		transform: translateX(42px) translateY(-15px) scale(0.7);
	}

	.owl-login.password .hand.hand-r {
		transform: translateX(-42px) translateY(-15px) scale(0.7);
	}

	.owl-login.password .arms .arm {
		transform: translateY(-40px) translateX(40px);
	}

	.owl-login.password .arms .arm.arm-r {
		transform: translateY(-40px) translateX(-40px) scaleX(-1);
	}
</style>
